<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <el-dialog
    :title="changeName"
    width="50%"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    top="10vh"
    @close="dialogClose"
    :append-to-body="true"
    v-model="taskChangeInformationCollection.show"
  >
    <!-- 环节变更 、 信息收集表单 -->
    <el-form
      ref="taskChangeInformationCollection"
      :model="taskChangeInformationCollectionInfo"
      label-suffix=":"
      label-position="left"
      label-width="90px"
    >
      <el-row>
        <el-col :span="23">
          <!-- 选择一个用用户-->
          <el-form-item
            v-if="choosePerson"
            :label="`${taskChangeInformationCollection.labelName || changeName}${
              changeKey === 'cancelAddSign' ? '人' : '给'
            }`"
            prop="acceptUser"
            :rules="[
              { required: true, message: `请选择${taskChangeInformationCollection.labelName || changeName}人` },
              { validator: acceptUserValidator, trigger: 'blur' }
            ]"
          >

            <user-choose :column="column"  v-model="taskChangeInformationCollectionInfo.acceptUser"></user-choose>


              <!--            &lt;!&ndash; 自定义选人器 &ndash;&gt;-->
<!--            <flow-user-choose-->
<!--              v-if="customSelector"-->
<!--              v-model="taskChangeInformationCollectionInfo.acceptUser"-->
<!--              @focus="inputFocus"-->
<!--              :maxRows="maxRows"-->
<!--              @input="inputChoose"-->
<!--            ></flow-user-choose>-->
<!--            &lt;!&ndash; select 选人器 &ndash;&gt;-->
<!--            <el-select-->
<!--              v-else-->
<!--              v-model="taskChangeInformationCollectionInfo.acceptUser"-->
<!--              clearable-->
<!--              :placeholder="`请选择${taskChangeInformationCollection.labelName || changeName}人`"-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="item in taskChangeInformationCollection.userArray"-->
<!--                :key="item.taskId"-->
<!--                :label="item.assigneeName"-->
<!--                :value="item.taskId"-->
<!--              >-->
<!--              </el-option>-->
<!--            </el-select>-->
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <!-- 环境变更原因 -->
          <el-form-item
            v-if="changeKey !== 'cc'"
            :label="`${taskChangeInformationCollection.labelName || changeName}原因`"
            prop="reason"
            :rules="[
              { required: true, message: `请输入${taskChangeInformationCollection.labelName || changeName}原因` }
            ]"
          >
            <el-input
              type="textarea"
              rows="7"
              v-model="taskChangeInformationCollectionInfo.reason"
              :placeholder="`请输入${taskChangeInformationCollection.labelName || changeName}原因`"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template slot="footer">
      <el-button @click="taskChangeInformationCollection.show = false" :loading="buttonLoading">取消</el-button>
      <el-button type="primary" @click="handleButtonConfirm" :loading="buttonLoading">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>

    import userChoose from '@/framework-core/components/user/user/userChoose.vue'

export default {
    components: {
        userChoose,
    },
  data() {
    return {
        acceptUserValidator: (rule, value, callback) => {
            if (typeof value === 'string') {
                callback()
            } else {
                value && value.length > 0 ? callback() : callback(new Error(`您必须选择一项...`))
            }
        },
        column: {userType:"org",value:"",prop:"acceptUser"},
        buttonLoading: false,
        // 表单数据
        taskChangeInformationCollectionInfo: {},
        // select 选人器 候选人数组
        acceptUserId: []
    }
  },
  props: {
    // 其他杂物数据手机
    taskChangeInformationCollection: {
      type: Object
    },
    // 是否需要选人
    choosePerson: {
      type: Boolean,
      default: false
    },
    // 触发流程变更的key
    changeKey: {
      type: String,
      required: true
    },
    // 触发流程变更的事件名称
    changeName: {
      type: String,
      required: true
    },
    // 最大选择数量
    maxRows: {
      type: Number,
      default: 1
    }
  },
  computed: {
    // 是否为自定义选择器选人  当需要选人的时候,减签需要服务器加载数据到select进行候选
    customSelector() {
      return this.choosePerson && this.changeKey !== 'cancelAddSign'
    }
  },
  methods: {
    inputFocus() {},
    inputChoose() {
      // this.$refs.taskChangeInformationCollection.validate((valid) => {
      //   if (valid) {}
      // })
    },
    // 确定
    handleButtonConfirm() {
      this.$refs.taskChangeInformationCollection.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          this.$emit(
            this.changeKey,
            this.taskChangeInformationCollectionInfo,
            () => {
              this.taskChangeInformationCollection.show = this.buttonLoading = false
            },
            () => {
              this.buttonLoading = false
            }
          )
        }
      })
    },
    dialogClose() {
      this.taskChangeInformationCollectionInfo = {}
    }
  }
}
</script>
<style lang='scss'>
.concatPrimaryTheme {
  .el-dialog__body {
    padding: 0;
  }
}
</style>
